<template>
    <div class="app-container">
        <el-card shadow="always">
            <el-form :model="queryParams" :inline="true" label-width="100px">
                <el-form-item label="所属区县：" prop="county">
                    <el-select v-model="queryParams.county" placeholder="请选择所属区县" clearable style="width: 240px">
                        <el-option v-for="dict in nhp_county_type" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="所属站点ID" prop="stationId">
                    <el-input v-model="queryParams.stationId" placeholder="请输入站号" clearable style="width: 240px" />
                </el-form-item>
                <el-form-item label="站点名称：" prop="siteName">
                    <el-input v-model="queryParams.stationName" placeholder="请输入基站名称" clearable style="width: 240px" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="listEnvTable">查询</el-button>
                    <el-button @click="unsetQueryForm"><el-icon>
                            <RefreshRight />
                        </el-icon>重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card shadow="always" style="margin-top: 10px;min-height: 500px;padding-bottom: 20px;">
            <el-row>
                <el-button type="primary" icon="Download" @click="exportData">导出</el-button>
                <el-button type="primary" icon="Pointer" @click="calculateScore">分值计算</el-button>
            </el-row>
            <div id="table" style="margin-top: 20px;">
                <el-table v-loading="loading" ref="envTable" :data="tableData" style="width: 100%" @sort-change="sortChange" @filter-change="filterChange">
                    <el-table-column prop="county" label="所属区县" width="120" align="center" fixed />
                    <el-table-column prop="stationId" label="所属站点ID" width="150" align="center" fixed />
                    <el-table-column prop="stationName" label="所属站点" width="350" align="center" fixed />
                    <el-table-column prop="transmitType" label="传输是否成环" width="120" align="center" 
                        :filter-multiple="false"
                        :filters="[
                            { text: '成环', value: '成环' },
                            { text: '未成环', value: '未成环' },
                            { text: '未知', value: '未知' }
                        ] " 
                        :column-key="'transmitType'"
                    />
                    <el-table-column prop="batteryDuration" label="蓄电池配置" width="150" align="center" 
                        :filter-multiple="false"
                        :filters="[
                            { text: '是', value: '是' },
                            { text: '否', value: '否' },
                        ] " 
                        :column-key="'batteryDuration'"
                        filter-placement="bottom-end"
                    />
                    <el-table-column prop="airconditionerStatus" label="空调状态" width="150" align="center" 
                        :filter-multiple="false"
                        :filters="[
                            { text: '正常', value: '正常' },
                            { text: '异常', value: '异常' },
                        ] " 
                        :column-key="'airconditionerStatus'"
                        filter-placement="bottom-end"
                    />
                    <el-table-column prop="inletRisk" label="台风进水风险" width="150" align="center" 
                        :filter-multiple="false"
                        :filters="[
                            { text: '是', value: '是' },
                            { text: '否', value: '否' },
                        ] " 
                        :column-key="'inletRisk'"
                        filter-placement="bottom-end"
                    />
                    <el-table-column prop="securityLevel" label="安全隐患" width="150" align="center" 
                        :filter-multiple="false"
                        :filters="[
                            { text: '是', value: '是' },
                            { text: '否', value: '否' },
                        ] " 
                        :column-key="'securityLevel'"
                        filter-placement="bottom-end"
                    />
                    <el-table-column prop="electricGeneration" label="发电条件" width="150" align="center" 
                        :filter-multiple="false"
                        :filters="[
                            { text: '是', value: '是' },
                            { text: '否', value: '否' },
                        ] " 
                        :column-key="'electricGeneration'"
                        filter-placement="bottom-end"
                    />
                    <el-table-column prop="lyStation" label="是否拉远" width="150" align="center" 
                        :filter-multiple="false"
                        :filters="[
                            { text: '拉远', value: '拉远' },
                            { text: '非拉远', value: '非拉远' },
                        ] " 
                        :column-key="'electricGeneration'"
                        filter-placement="bottom-end"
                    />
                    <el-table-column prop="score" label="环境告警总分" width="150" align="center" fixed="right" sortable="custom" />
                    <el-table-column fixed="right" label="操作" align="center">
                        <template #default="scope">
                            <el-button link type="primary" size="small"
                                @click="showDetailDialog(scope.row.stationId)">修改</el-button>
                        </template>
                    </el-table-column>
                    <template #empty>
                        <el-empty :image-size="40" />
                    </template>
                </el-table>
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 50, 100, 200]" :small="small" :disabled="disabled" :background="background"
                    layout="total, sizes, prev, pager, next" :total="total" @size-change="listEnvTable"
                    @current-change="listEnvTable" />
            </div>
        </el-card>
    </div>

    <el-dialog v-model="detailDialogVisible" title="修改基站环境信息" width="1000" @closed="closeDialog">
        <el-form :inline="true" :model="envForm" label-width="200px">
            <el-form-item label="所属区县">
                <el-input v-model="envForm.county" disabled style="width: 200px" />
            </el-form-item>
            <el-form-item label="所属站点ID">
                <el-input v-model="envForm.stationId" disabled style="width: 200px" />
            </el-form-item>
            <el-form-item label="所属站点">
                <el-input v-model="envForm.stationName" disabled style="width: 200px" />
            </el-form-item>
            <el-form-item label="是否拉远">
                <el-input v-model="envForm.lyStation" disabled style="width: 200px" />
            </el-form-item>
            <el-form-item label="传输是否成环">
                <el-input v-model="envForm.transmitType" style="width: 200px" />
            </el-form-item>
            <el-form-item label="蓄电池配置">
                <el-select v-model="envForm.batteryDuration" style="width: 200px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="空调状态">
                <el-select v-model="envForm.airconditionerStatus" style="width: 200px">
                    <el-option v-for="item in airOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="台风进水风险">
                <el-select v-model="envForm.inletRisk" style="width: 200px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="安全隐患">
                <el-select v-model="envForm.securityLevel" style="width: 200px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="发电条件">
                <el-select v-model="envForm.electricGeneration" style="width: 200px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="detailDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="updateEnv">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

</template>

<script setup name="networkEnv">
import { queryByPage, queryById, updateStationEnv, calculateEnvScore } from '@/api/biz/networkEnv';

const { proxy } = getCurrentInstance();

var currentDate = new Date();
currentDate.setDate(currentDate.getDate() + 1);

const { nhp_county_type } = proxy.useDict("nhp_county_type");

const queryParams = ref({
    county: "",
    stationId: "",
    stationName: ""
})

const tableData = ref([])
const pageSize = ref(10)
const currentPage = ref(1)
const total = ref(0)

const detailDialogVisible = ref(false)
const envForm = ref({})
const nowOrder = ref();

const options = [
    {
        key: "是",
        value: "是"
    },
    {
        key: "否",
        value: "否"
    },
]

const airOptions = [
    {
        key: "正常",
        value: "正常"
    },
    {
        key: "异常",
        value: "异常"
    }
]

function listEnvTable() {
    const param = {}
    param.pageSize = pageSize.value
    param.pageNum = currentPage.value
    param.stationId = queryParams.value.stationId
    param.county = queryParams.value.county
    param.stationName = queryParams.value.stationName
    param.order = nowOrder.value;
    queryByPage(param).then(response => {
        tableData.value = response.rows;
        total.value = response.total;
    });

}

function unsetQueryForm() {
    queryParams.value = {
    }
}


//导出
function exportData() {
    const param = {}
    param.pageSize = pageSize.value
    param.pageNum = currentPage.value
    param.stationId = queryParams.value.stationId
    param.county = queryParams.value.county
    param.stationName = queryParams.value.stationName
    param.order = nowOrder.value;
    proxy.download("/nhpStationEnv/export", {
        ...param
    }, `基站环境_${new Date().getTime()}.xlsx`);
}

//修改
function showDetailDialog(stationId) {
    detailDialogVisible.value = true
    queryById(stationId).then(response => {
        envForm.value = response.data
    })
}

function closeDialog() {
    envForm.value = {}
}

function updateEnv() {
    var param = {}
    param.stationId = envForm.value.stationId
    param.batteryDuration = envForm.value.batteryDuration
    param.airconditionerStatus = envForm.value.airconditionerStatus
    param.inletRisk = envForm.value.inletRisk
    param.securityLevel = envForm.value.securityLevel
    param.electricGeneration = envForm.value.electricGeneration

    updateStationEnv(param).then(response => {
        detailDialogVisible.value = false
        ElMessage({
            message: '修改成功',
            type: 'success',
            plain: true,
        })
        listEnvTable()
    })
}

function calculateScore() {
    calculateEnvScore().then(response => {
        ElMessage({
            message: '开始计算',
            type: 'success',
            plain: true,
        })
    })
}

// 总分排序
function sortChange(column, prop, order){
    nowOrder.value = column.order;
    listEnvTable();
}


// 筛选状态
function filterChange(filters){
    const param = {}
    if(filters.hasOwnProperty("transmitType")){
        param.transmitType = filters.transmitType[0]
    }
    if(filters.hasOwnProperty("batteryDuration")){
        param.batteryDuration = filters.batteryDuration[0]
    }
    if(filters.hasOwnProperty("airconditionerStatus")){
        param.airconditionerStatus = filters.airconditionerStatus[0]
    }
    if(filters.hasOwnProperty("inletRisk")){
        param.inletRisk = filters.inletRisk[0]
    }
    if(filters.hasOwnProperty("securityLevel")){
        param.securityLevel = filters.securityLevel[0]
    }
    if(filters.hasOwnProperty("electricGeneration")){
        param.electricGeneration = filters.electricGeneration[0]
    }


    param.pageSize = pageSize.value
    param.pageNum = currentPage.value
    param.stationId = queryParams.value.stationId
    param.county = queryParams.value.county
    param.stationName = queryParams.value.stationName
    param.order = nowOrder.value;
    queryByPage(param).then(response => {
        tableData.value = response.rows;
        total.value = response.total;
    });
}





listEnvTable();





</script>
